<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="myCardTit">我的卡<text>共两张</text></view>
		<view class="myCardWrap">
			<view 
			   v-for="(idcard,index) in idcards"
			   :key="index"
			   class="idcardsList"
			   @tap="untyBtn(index)">
				<view class="idcards">
					<view class="idcard-info">
						<view>
							<view class="idcard-logo"><image :src="idcard.bankLogo"></image></view>
							<view class="idcard-name"><text>{{idcard.name}}</text><text>{{idcard.cardType}}</text></view>
						</view>
						<view class="idcard-numb">****<text>{{idcard.lastNumb}}</text></view>
					</view>
					<view class="idcard-bg"><image :src="idcard.cardBg"></image></view>
				</view>
				
				<view class="untyingCard" :class="[untyIndex == index && isShowUnty ? 'untyHeight' : 'untyHeight0']">
					<image src="/static/myPic/bankCard.png"></image>
					<text>解绑银行卡</text>
				</view>
			</view>
		</view>
		<view class="addCard" @tap="goAddCard"><text>添加银行卡</text></view>
		<text class="tips">支持储蓄卡/信用卡</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navConfig:{
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'银行卡	'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				idcards:[
					{name:'中国建设银行',cardType:'信用卡',lastNumb:6558,bankLogo:'/static/myPic/jsyhLogo.png',cardBg:'/static/myPic/jsyhBg.png'},
					{name:'中国农业银行',cardType:'储蓄卡',lastNumb:2340,bankLogo:'/static/myPic/nyyhLogo.png',cardBg:'/static/myPic/nyyhBg.png'},
				],
				untyIndex:-1, //默认不显示解绑银行卡
				cardClickNumb:0,//默认点击0次
				isShowUnty:false
			}
		},
		methods:{
			untyBtn(index){
				this.untyIndex = index;
				this.isShowUnty = !this.isShowUnty
				console.log(index,this.isShowUnty);
			},
			goAddCard(){
				uni.navigateTo({
					url:'/pages/my/myBankCard/bankCard'
				})
			}
		},
		
	}
</script>

<style>
	.myCardTit{
		margin:38upx 45upx 38upx 45upx;
		font-size: 30upx;
		color: #000000;
	}
	.myCardTit text{
		margin-left: 10upx;
		color: #999999;
		font-size: 24upx;
	}
	.myCardWrap{
		margin:0 45upx;
		position: relative;
	}
	.idcardsList{
		margin-top: -200upx;
	}
	.idcardsList:first-child{
		margin-top: 0;
	}
	
	.idcards{
		padding:0 30upx;
		/* width:652upx; */
		height:326upx;
		background:linear-gradient(to right,#388CCC,#3B62BF);
		box-shadow: 0px 0px 7px 0px rgba(32,87,149,0.48);
		border-radius: 10upx;
		box-sizing: border-box;
		position: relative;
	}
	.idcard-info{
		padding-top: 40upx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.idcard-bg {
		max-width: 200upx;
		max-width: 210upx;
		position: absolute;
		right:-35upx;
		bottom:-60upx;
	}
	.idcard-bg image{
		max-width: 200upx;
		max-height: 210upx;
	}
	.idcard-logo{
		width:74upx;
		height:74upx;
		border-radius: 74upx;
		background-color: #FFFFFF;
		margin-right:26upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.idcard-logo image{
		max-width: 43upx;
		max-height: 43upx;
	}
	.idcard-name{
		display: flex;
		flex-direction: column;
	}
	.idcard-name text:first-of-type{
		font-size: 30upx;
	}
	.idcard-name text:nth-of-type(2){
		font-size: 24upx;
	}
	.idcard-info>view{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.idcard-numb{
		font-size: 32upx;
	}
	.idcard-numb text{
		font-size: 36upx;
	}
	.untyingCard{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.untyingCard image{
		width:93upx;
		height: 87upx;
	}
	.untyingCard text{
		font-size:30upx;
		color: #333333;
	}
	.untyHeight0{
		margin-top: 0upx;
		margin-bottom: 0upx;
		height: 0;
		opacity: 0;
		transition: all .3s ease;
	}
	.untyHeight{
		margin-top: 30upx;
		margin-bottom: 270upx;
		height: auto;
		opacity: 1;
		transition: all .3s ease;
	}
	.idcardsList:nth-last-child(1) .untyHeight{
		margin-bottom: 20upx;
	}
	.addCard{
		margin:70upx auto 0 auto;
		width:388upx;
		height: 72upx;
		line-height: 72upx;
		border-radius: 72upx;
		background:linear-gradient(to right,#54B0FF,#577AFF);
		color: #fff;
		text-align: center;
		font-size: 28upx;
	}
	.tips{
		font-size: 22upx;
		color: #999999;
		text-align: center;
		margin: 20upx auto;
		display: block;
	}
</style>
